iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

JavaScript 30天 跟著一起做一遍!!!系列 第 9

[Day9] 14 Must Know Dev Tools Tricks

  • 分享至 

  • xImage
  •  

[Day9] 14 Must Know Dev Tools Tricks

14個必須知道的開發工具技巧

需要用到的技巧與練習目標

  1. Break on / attribute modifications 除錯
  2. console.log 運用

console.log 運用

//--- Intenpolated ---//
console.log("hello this a %s" , 'cat')
// %s 為帶入的變數代號

//--- styled ---//
console.log('%c I am some graet text',font-size:50px; background:red;)
// %c 可以帶入css

//--- warnig ---//
console.warn('oh Nooo')

//--- error ---//
console.error('shit')

//--- info ---//
console.info('this is info')

//--- Testing ---//
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'),'this is wrong!');

//測試如果回傳是 false 則會回傳 'this is wrong!'(後方填寫的字樣)

//--- clearing ---//
console.clear()
//清除console上面的資訊

//--- viewing DOM Elements ---//
const p = document.querySelector('p');

console.log(p) //獲取 DOM 元素
console.dir(p) //獲取 DOM 元素的相關資訊

//--- Grouping together ---//
//可以用變數判斷 並將同變數的群組

const dogs =[{name:'BOb',age:2},{name:'Mike',age:8}]

dogs.forEach(dog => {
console.group(`${dog.name}`);
console.log(`this is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`)
console.groupEnd(`${dog.name}`);
})

console.groupCollapsed(`${dog.name}`);
//和 console.group(`${dog.name}`)功能一樣,只是呈現方式為合起來而非展開。 


//--- counting ---//
//幫忙計算總共有幾相同的值

console.count('Wes')
console.count('Steve')
console.count('Wes')
console.count('Wes')
console.count('Steve')

//最後會回傳 Wes:3,Steve:2 

//--- timing ---//
//計算資料回傳花費多少時間

console.time('fetching data') //開始計算的時間
fetch('https://api.github.com/users/wesbos')
.then(data => data.json())
.then(data => {
  console.timeEnd('fetching data'); //結束的時間
  console.log(data);
});

//會回傳 fetching data:'所花費的時間'


//--- table ---//
//傳入陣列會回傳表格型式的列表
console.table(dogs)

上一篇
[Day8] Fun with HTML5 Canvas
下一篇
[Day10] Hold Shift to Check Multiple Checkboxes
系列文
JavaScript 30天 跟著一起做一遍!!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言